<template>
  <div>
    <div class="container">
      <div class="c_banner">
        <img class="c_banner_img" :src="DetailData.banner" alt="" />
      </div>
      <div class="c_content">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/productCenter' }">{{
            $t("产品中心")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ DetailData.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="rich-text" v-html="DetailData.content"></div>
        <!-- 核心功能 -->
        <div class="c_hexin" v-if="DetailData.core.length != 0">
          <div class="c_title">{{ $t("核心功能") }}</div>
          <el-row :gutter="20">
            <el-col :span="8" v-for="item in DetailData.core" :key="item.id">
              <div class="c_card">
                <div class="img-box">
                  <img class="c_card_img" :src="item.thumb" alt="" />
                </div>
                <div class="c_card_f1">{{ item.title }}</div>
                <div class="c_card_f2">{{ item.content }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 产品规格 -->
        <div class="c_hexin" v-if="DetailData.specs.length != 0">
          <div class="c_title">{{ $t("产品规格") }}</div>
          <el-row>
            <el-col :span="12" v-for="item in DetailData.specs" :key="item.id">
              <div class="c_table">
                <div class="c_table_l">{{ item.title }}</div>
                <div class="c_table_r">{{ item.content }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="container_mobile">
      <div class="c_banner">
        <img class="c_banner_img" :src="DetailData.wap_banner" alt="" />
      </div>
      <div class="c_content">
        <div class="rich-text" v-html="DetailData.wap_content"></div>
        <!-- 核心功能 -->
        <div class="c_hexin" v-if="DetailData.core.length != 0">
          <div class="c_title">{{ $t("核心功能") }}</div>
          <el-row :gutter="10">
            <el-col :span="12" v-for="item in DetailData.core" :key="item.id">
              <div class="c_card">
                <img class="c_card_img" :src="item.thumb" alt="" />
                <div class="c_card_f1">{{ item.title }}</div>
                <div class="c_card_f2">{{ item.content }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 产品规格 -->
        <div class="c_hexin" v-if="DetailData.specs.length != 0">
          <div class="c_title">{{ $t("产品规格") }}</div>
          <el-row>
            <el-col :span="12" v-for="item in DetailData.specs" :key="item.id">
              <div class="c_table">
                <div class="c_table_l">{{ item.title }}</div>
                <div class="c_table_r">{{ item.content }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="height: 200rem"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  async asyncData({ $indexApi, params }) {
    const DetailData = await $indexApi.getGoodsDetail({
      id: params.id,
    });
    // console.log(DetailData.data);

    return {
      DetailData: DetailData.data,
    };
  },
  head() {
    return {
      title: this.DetailData.seo_title,
      meta: [
        {
          name: this.DetailData.seo_keywords,
          content: this.DetailData.seo_desc,
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container_mobile {
    display: none;
  }
  .container {
    display: block;
    .c_banner {
      width: 100%;
      // height: 800rem;

      .c_banner_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .c_content {
      padding: 40rem 100rem 150rem 100rem;

      .rich-text {
        width: 100%;
        text-align: center;
        margin-top: 50rem;
        font-size: 24rem;
        :deep(img) {
          width: 100% !important;
          height: auto !important;
          margin-top: -8px;
        }
      }

      .c_hexin {
        .c_title {
          font-size: 54rem;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #333333;
          margin: 120rem 0 100rem 0;
          text-align: center;
        }

        .c_card {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 400rem;
          border-radius: 20rem;
          &:hover {
            .c_card_img {
              transform: scale(1.2);
            }
          }
          .img-box {
            width: 100%;
            height: 300rem;
            border-radius: 20rem;
            overflow: hidden;
          }

          .c_card_img {
            width: 100%;
            height: 100%;
            transition: 0.6s;
          }

          .c_card_f1 {
            font-size: 20rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #333333;
            margin: 16rem 0 12rem 0;
          }

          .c_card_f2 {
            font-size: 16rem;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #999999;
          }
        }
        .c_table {
          display: flex;
          align-items: center;
          background: #f8f8f8;
          border-radius: 10rem;
          .c_table_l {
            flex: 1;
            border: 1px solid #f5f5f5;
            height: 80rem;
            line-height: 80rem;
            text-align: center;
            font-size: 24rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #333333;
          }
          .c_table_r {
            flex: 3;
            border: 1px solid #f5f5f5;
            background: #fff;
            height: 80rem;
            line-height: 80rem;
            padding-left: 40rem;
            font-size: 24rem;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }
}
@media (max-width: 900px) {
  .container {
    display: none;
  }
  .container_mobile {
    display: block;
    .c_banner {
      width: 100%;

      .c_banner_img {
        width: 100%;
      }
    }

    .c_content {
      padding: 0 10px;

      .rich-text {
        width: 100%;
        text-align: center;
        margin-top: 20px;
        font-size: 16px;
        :deep(img) {
          width: 100% !important;
          height: auto !important;
          margin-top: -4px;
        }
      }

      .c_hexin {
        .c_title {
          font-size: 18px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #333333;
          margin: 24px 0;
          text-align: center;
        }

        .c_card {
          display: flex;
          flex-direction: column;
          align-items: center;
          border-radius: 20rem;

          .c_card_img {
            width: 100%;
            height: 133px;
            border-radius: 7px;
          }

          .c_card_f1 {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #333333;
            margin: 7px 0;
          }

          .c_card_f2 {
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #999999;
          }
        }
        .c_table {
          background: #f8f8f8;
          border-radius: 7px;
          .c_table_l {
            border: 1px solid #f5f5f5;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #333333;
          }
          .c_table_r {
            border: 1px solid #f5f5f5;
            background: #fff;
            height: 30px;
            line-height: 30px;
            padding-left: 2px;
            text-align: center;
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }
}
</style>
